<template>
	<view>
		<u-navbar @leftClick="leftClick" @rightClick="rightClick" rightText="搜索" :autoBack="true">
			<view slot="center" class="search">
				<u-search placeholder="请输入想要搜索的内容" focus v-model="keyword" :showAction="false" :clearabled="false" height="0" @search="rightClick"></u-search>
			</view>
		</u-navbar>
		<view class="line"></view>
		<view class="search-history" v-if="historyList.length > 0">
			<view class="history-title">
				<view class="history-text">历史搜索</view>
				<u-icon name="trash" @click="hanldeDeleteHistoryList"></u-icon>
			</view>
			<view class="history-list">
				<view v-for="(item, index) in historyList" :key="index">{{ item }}</view>
			</view>
		</view>
		<view class="search-hot">
			<view class="hot-title">
				<u-icon name="search" size="20"></u-icon>
				<view class="history-text">热门搜索</view>
			</view>
			<view class="hot-list">
				<view v-for="(item, index) in hotList" :key="index">{{ item.keywords }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getHotKeyWords } from '@/api/search.js';
export default {
	data() {
		return {
			keyword: '',
			historyList: JSON.parse(uni.getStorageSync('historySearch')),
			hotList: []
		};
	},
	onLoad() {
		getHotKeyWords().then((res) => {
			if (res.list) {
				this.hotList = res.list;
			}
		});
	},
	methods: {
		//搜索按钮
		rightClick() {
			if (!this.keyword) {
				return;
			}
			let index = this.historyList.indexOf(this.keyword);
			if (index < 0) {
				this.historyList.unshift(this.keyword);
				//实例化存储
				uni.setStorageSync('historySearch', JSON.stringify(this.historyList));
			} else {
				//已存在的情况下，将位置前移
				this.historyList.unshift(this.historyList.splice(index, 1)[0]);
				uni.setStorageSync('historySearch', JSON.stringify(this.historyList));
			}
		},
		leftClick() {
			uni.navigateBack({
				delta: -1
			});
		},
		//清空历史记录
		hanldeDeleteHistoryList() {
			const _this = this;
			uni.showModal({
				title: '是否清空历史搜索？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						_this.historyList = [];
						uni.setStorageSync('historySearch', JSON.stringify([]));
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style scoped>
.line {
	width: 100%;
	height: 10rpx;
	background: rgba(241, 241, 241, 0.39);
	/* border-bottom: 1px solid #dcdcdc; */
	margin-top: 110rpx;
}
.search {
	width: 527rpx;
}

/deep/ .u-search__content {
	padding: 6rpx 20rpx;
}

.search-history {
	padding: 33rpx;
}

.history-title {
	display: flex;
	justify-content: space-between;
}

.history-text {
	font-size: 28rpx;
	font-weight: bold;
	color: #636363;
}

.history-list {
	padding: 33rpx;
	display: flex;
	flex-wrap: wrap;
}

.history-list > view {
	padding: 5rpx 10rpx;
	background: #e6e6e6;
	border-radius: 10rpx;
	margin: 10rpx 0;
}
/* 对所有偶数元素添加样式 */
.history-list > view:nth-child(2n) {
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.search-hot {
	padding: 33rpx;
}
.hot-title {
	display: flex;
	padding-bottom: 33rpx;
	border-bottom: 1px solid #ccc;
}

.hot-list {
	display: flex;
	flex-wrap: wrap;
}

.hot-list > view {
	width: 50%;
	padding-top: 33rpx;
	font-size: 29rpx;
	font-weight: 400;
	color: #333333;
}
</style>
